<!--
 * @Author: your name
 * @Date: 2020-12-04 11:42:03
 * @LastEditTime: 2020-12-17 20:50:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\phpStudy\WWW\steam\index.html
-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到 Steam</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/lib/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/lib/swiper-6.3.5/swiper-bundle.min.css">
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/nav.css">
    <link rel="stylesheet" href="/css/index/index.css">
    <link rel="stylesheet" href="/css/font/motivaSans.css">

</head>

<body>
        <!-- 导航栏 -->
        <header></header>

        <!-- 内容 -->
        <section>
            <!-- 头部 -->
            <div class="page">
                <!-- 商店导航栏 -->
                <nav class="store-header"></nav>

                <!-- 头部内容 -->
                <div class="header-text">
                    <div class="text-img"></div>
                </div>
            </div>

            <!-- 主要内容 -->
            <div class="main">
                <!-- 精选特惠 -->
                <div class="focus-discount">
                    <div class="main-content">
                        <div class="focus-title">
                            精选特惠
                        </div>

                        <div class="focus-goods" id="focusGames">
                            <!-- <div class="focus-good">
                                <a href="#"></a>
                                <img src="/images/index/main/hero_1030840_english.jpeg" alt="">
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </div>
                            <div class="focus-good">
                                <a href="#"></a>
                                <img src="/images/index/main/hero_306130_english.jpeg" alt="">
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </div>
                            <div class="focus-good">
                                <a href="#"></a>
                                <img src="/images/index/main/hero_1158310_english.jpeg" alt="">
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </div> -->
                        </div>

                        <script type='text/html' id="focusGamesTemplate">
                            {{each focusGame as focusGames key}}
                            <div class="focus-good">
                                <a href="/html/detail/detail.html?{{focusGames.id}}"></a>
                                <img src="{{focusGames.imgHot}}" alt="">
                                <div class="discount">
                                    <div class="discount-pct">
                                        -<span>{{focusGames.discountPct}}</span>%
                                    </div>
                                    <div class="discount-price">
                                        <span class="price-even">
                                            ￥<span>{{focusGames.originPrice}}</span> 
                                        </span>
                                        <span class="price-now">￥<span>{{focusGames.finalPrice}}</span></span>
                                    </div>
                                </div>
                            </div>
                            {{/each}}
                        </script>

                    </div>
                </div>

                <!-- 提名大奖 -->
                <div class="awardsBox">
                    <div class="main-content">
                        <a href="#" class="awards">
                            <div class="awards-main">
                                <div class="awards-title">
                                    STEAM 大奖
                                </div>
                                <div class="awards-remain">
                                    提名您 2020 年最爱的游戏角逐 10 大奖项
                                </div>
                            </div>
                            <div class="awards-nominate">
                                立刻提名
                            </div>

                        </a>
                    </div>
                </div>

                <!-- 游戏推荐 -->
                <div class="games-recommend">
                    <div class="main-content">
                        <div class="games-row games-row4" id="row1games">
                            <!-- <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/capsule_616x353.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/goose_game.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/remnant_from_the_ash.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/strllaris.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a> -->
                        </div>
                        <script type='text/html' id="row1Template">
                            {{each row1Game row1Games key}}
                            <a href="/html/detail/detail.html?{{row1Games.id}}" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="{{row1Games.imgNormal}}" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">
                                        -<span>{{row1Games.discountPct}}</span>%
                                    </div>
                                    <div class="discount-price">
                                        <span class="price-even">
                                            ￥<span>{{row1Games.originPrice}}</span> 
                                        </span>
                                        <span class="price-now">
                                            ￥<span>{{row1Games.finalPrice}}</span>
                                        </span>
                                    </div>
                                </div>
                            </a>
                            {{/each}}
                        </script>

                        <div class="games-row games-row3" id="row2games">
                            <!-- <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/totalwar_three_kingdoms.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/disco_elysium.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/pummel_party.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a> -->
                        </div>
                        <script type='text/html' id="row2Template">
                            {{each row2Game row2Games key}}
                            <a href="/html/detail/detail.html?{{row2Games.id}}" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="{{row2Games.imgNormal}}" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">
                                        -<span>{{row2Games.discountPct}}</span>%
                                    </div>
                                    <div class="discount-price">
                                        <span class="price-even">
                                            ￥<span>{{row2Games.originPrice}}</span> 
                                        </span>
                                        <span class="price-now">
                                            ￥<span>{{row2Games.finalPrice}}</span>
                                        </span>
                                    </div>
                                </div>
                            </a>
                            {{/each}}
                        </script>

                        <div class="games-row games-row4" id="row3games">
                            <!-- <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/ori.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/Assassins_creed.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/outer_wilds.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/2k21.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a> -->
                        </div>
                        <script type='text/html' id="row3Template">
                            {{each row3Game row3Games key}}
                            <a href="/html/detail/detail.html?{{row3Games.id}}" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="{{row3Games.imgNormal}}" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">
                                        -<span>{{row3Games.discountPct}}</span>%
                                    </div>
                                    <div class="discount-price">
                                        <span class="price-even">
                                            ￥<span>{{row3Games.originPrice}}</span> 
                                        </span>
                                        <span class="price-now">
                                            ￥<span>{{row3Games.finalPrice}}</span>
                                        </span>
                                    </div>
                                </div>
                            </a>
                            {{/each}}
                        </script>

                        <div class="games-row games-row3" id="row4games">
                            <!-- <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/resident_evil3.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/the_survivalists.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a>
                            <a href="#" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="/images/index/main/games-box/the-forest.jpg" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">-25%</div>
                                    <div class="discount-price">
                                        <span class="price-even">￥298 </span>
                                        <span class="price-now">￥244</span>
                                    </div>
                                </div>
                            </a> -->
                        </div>
                        <script type='text/html' id="row4Template">
                            {{each row4Game row4Games key}}
                            <a href="/html/detail/detail.html?{{row4Games.id}}" class="game-box">
                                <div class="games-img-vdo">
                                    <img src="{{row4Games.imgNormal}}" alt="">
                                    <video src=""></video>
                                </div>
                                <div class="discount">
                                    <div class="discount-pct">
                                        -<span>{{row4Games.discountPct}}</span>%
                                    </div>
                                    <div class="discount-price">
                                        <span class="price-even">
                                            ￥<span>{{row4Games.originPrice}}</span> 
                                        </span>
                                        <span class="price-now">
                                            ￥<span>{{row4Games.finalPrice}}</span>
                                        </span>
                                    </div>
                                </div>
                            </a>
                            {{/each}}
                        </script>
                    </div>
                </div>

                <!-- 精选系列 -->
                <!-- <div class="focus-series">
                    <div class="main-content">
                        <div class="focus-title">
                            精选系列作品
                        </div>
                        <div class="focus-series-goods">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="/images/index/main/games-series/franchise_Tomb_Raider_background_english.jpg" alt=""></div>
                                        </a>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="/images/index/main/games-series/franchise_Assasins_Creed_background_english.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="/images/index/main/games-series/franchise_Sniper_Elite_background_english.jpg" alt="">
                                        </a>
                                    </div> -->

                                    <!-- TODO: 精品系列游戏的轮播图完善 -->
                                    <!-- <div class="swiper-slide">Slide 4</div>
                                    <div class="swiper-slide">Slide 5</div>
                                    <div class="swiper-slide">Slide 6</div>
                                    <div class="swiper-slide">Slide 7</div>
                                    <div class="swiper-slide">Slide 8</div>
                                    <div class="swiper-slide">Slide 9</div>
                                  </div>      
                            </div> -->
                            <!-- Add Arrows -->
                            <!-- <div class="swiper-button-next swiper-button"></div>
                            <div class="swiper-button-prev swiper-button"></div> -->
                            <!-- Add Pagination -->
                            <!-- <div class="swiper-pagination series-swiper"></div>
                        </div>
                    </div>
                </div> -->

                <!-- 游戏品种 -->
                <div class="games-type">
                    <div class="main-content">
                        <div class="games-type-title">
                            <img src="/images/index/main/deer.png" alt="">
                            <div class="type-title">
                                <div class="title">
                                    全新！- 按类型浏览秋季特惠
                                </div>
                                <div class="title-line">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="games-type-goods">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="/images/index/main/game-type/visualnovel.jpeg" alt="">
                                            <span>视觉小说</span>
                                        </a>
                                        <a href="#" class="game-type">
                                            <img src="/images/index/main/game-type/adventure.jpg" alt="">
                                            <span>冒险</span>
                                        </a>
                                        <a href="#" class="game-type">
                                            <img src="/images/index/main/game-type/action.jpg" alt="">
                                            <span>动作</span>
                                        </a>
                                        <a href="#" class="game-type">
                                            <img src="/images/index/main/game-type/casualpuzzle.jpg" alt="">
                                            <span>休闲及解谜</span>
                                        </a>
                                    </div>
                                    
                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="/images/index/main/game-type/simulation.jpg" alt="">
                                            <span>模拟</span>
                                        </a>
                                        <a href="#" class="game-type">
                                            <img src="/images/index/main/game-type/rpg.jpg" alt="">
                                            <span>角色扮演</span>
                                        </a>
                                        <a href="#" class="game-type">
                                            <img src="/images/index/main/game-type/strategy.jpg" alt="">
                                            <span>策略</span>
                                        </a>
                                        <a href="#" class="game-type">
                                            <img src="/images/index/main/game-type/horror.jpg" alt="">
                                            <span>恐怖</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide">
                                        <a href="#">
                                            <img src="/images/index/main/game-type/racingsports.jpg" alt="">
                                            <span>竞速及体育</span>
                                        </a>
                                        <a href="#" class="game-type">
                                            <img src="/images/index/main/game-type/vr.jpg" alt="">
                                            <span>虚拟现实</span>
                                        </a>
                                        <a href="#" class="game-type">
                                            <img src="/images/index/main/game-type/anime.jpg" alt="">
                                            <span>动漫</span>
                                        </a>
                                        <a href="#" class="game-type">
                                            <img src="/images/index/main/game-type/coop.jpg" alt="">
                                            <span>合作</span>
                                        </a>
                                    </div>
                                
                                  </div>      
                            </div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next swiper-button"></div>
                            <div class="swiper-button-prev swiper-button"></div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination games-type-swiper"></div>
                        </div>
                    </div>
                </div>
            </div>

            </div>
        </section>

        <!-- 底部栏 -->
        <footer></footer>
</body>

<script src="/lib/requirejs/require.js" data-main='/js/index/index'></script>

</html>